<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="order-top flexWarpCenterColumn">
					<view class="shop-name">{{orderData.store_name}}-{{orderData.equipment_name}}</view>
					<view class="order-time">
						<text>{{orderData.order_type=="immediately"?"立刻开台":orderData.order_type=="make_appointment"?"预约开台":"其他套餐"}}</text>
						<text>{{orderData.totalHour}}小时</text>
					</view>
				</view>
				<view class="order-info-box">
					<view class="order-info flexWrap">
						<view>已选时间：</view>
						<view>{{orderData.service_date}} {{orderData.startTime.split(' ')[1]}}～<text v-if="orderData.is_ci==1">次日</text> {{orderData.endTime.split(' ')[1]}}</view>
					</view>
					<view class="order-info flexWrap">
						<view>订单金额：</view>
						<view>¥{{orderData.order_price}}</view>
					</view>
				</view>
				<view class="pay-box">
					<view class="pay-item" :class="{active:payIndex==1}" @tap="changePayType(1)" v-if="paymentConfig.wechat_payment==1">
						<view class="item-top flexWrap">
							<view class="title flexWrapNo">
								<image src="../../static/home/wechat.png" class="title-icon"></image>
								微信支付
							</view>
							<view class="flexWrapNo">
								¥{{totalPrice}}
								<view class="check-box">
									<image src="../../static/home/check-icon.png" v-if="payIndex==1"></image>
									<image src="../../static/home/nocheck.png" v-else></image>
								</view>
							</view>
						</view>
						<view class="item-bottom flexWrap" v-if="paymentConfig.coupon==1">
							<view class="bottom-left flexWrapNo">
								可用优惠券：
								<text class="yellow">{{couponTitle}}</text>
							</view>
							<view class="flexWrapNo" @tap="goPage('/pages/home/selectCoupon?order_price='+orderData.order_price)">
								<text v-if="!couponId">未选择</text>
								<text class="yellow" v-else>-￥{{couponMoney}}</text>
								<image src="../../static/user/left-icon.png" class="arrow-icon"></image>
							</view>
						</view>
						<view class="item-bottom flexWrap" v-else>
							<view class="bottom-left flexWrapNo">
								暂时无法使用优惠券
							</view>
						</view>
					</view>
					<view class="pay-item" :class="{active:payIndex==2}" @tap="changePayType(2)">
						<view class="item-top flexWrap">
							<view class="title flexWrapNo">
								<image src="../../static/home/gold.png" class="title-icon"></image>
								卡余额支付
							</view>
							<view class="check-box">
								<image src="../../static/home/check-icon.png" v-if="payIndex==2"></image>
								<image src="../../static/home/nocheck.png" v-else></image>
							</view>
						</view>
						<view class="item-bottom flexWrap">
							<view class="bottom-left flexWrapNo">
								当前余额：¥{{wallet}}
								<text class="yellow"></text>
							</view>
							<view class="charge-btn" @tap="goPage('/pages/user/balancereCharge')" v-if="paymentConfig.recharge==1">去充值</view>
						</view>
					</view>
					<!-- <view class="pay-item" :class="{active:payIndex==6}" @tap="changePayType(6)">
						<view class="item-top flexWrap">
							<view class="title flexWrapNo">
								<image src="../../static/home/gold.png" class="title-icon"></image>
								通卡支付({{discount}}折) <text class="grey">-{{discount_price}}</text>
							</view>
							<view class="check-box">
								<image src="../../static/home/check-icon.png" v-if="payIndex==6"></image>
								<image src="../../static/home/nocheck.png" v-else></image>
							</view>
						</view>
						<view class="item-bottom flexWrap">
							<view class="bottom-left flexWrapNo">
								当前余额：¥{{money}}
								<text class="yellow">实际支付:{{yingfu_price}}</text>
							</view>
							<view class="charge-btn" @tap="goPage('/pages/user/platformRecharge')" v-if="paymentConfig.recharge==1">去充值</view>
						</view>
					</view> -->
				</view>
				<view class="verification-box flexWrapNo" @tap="goPage('/pages/coupon/verificationCoupon')">
					<image src="../../static/coupon/yanquan-icon.png" class="yanquan-icon"></image>
					团购验券
					<text class="icon-more"></text>
				</view>
				<view class="point-box">
					<view>温馨提示：</view>
					<view>1、使用充值卡余额支付，不可使用系统优惠券。</view>
					<view>2、使用团购券抵扣，不可使用系统优惠券。</view>
					<view>3、使用系统套餐或团购套餐，且手动结束订单，不予退款。</view>
					<view>4、优惠券使用后不予退还。</view>
				</view>
				<view class="btn-box flexWarpColumn">
					<view class="disclaimer flexWrapNo">
						<view class="cheack" :class="{cheackd:agreeFlag}"></view>
						已阅读并同意<text @tap="showModel()">《小爱自助免责声明》</text>
					</view>
					<view class="wechat-pay" @tap="comfirmPay()">确认支付</view>
				</view>
				<view class="model-box" v-if="modelFlag">
					<view class="title">小爱自助免责声明</view>
					<view class="model-cont">
						<view>小爱24H自助台球厅是以“安全、自助、环保、自律、节约”为宗旨的自发性体育活动场所。</view>
						<view>本球厅由用户自发组织和规划活动地点、活动时间；</view>
						<view> 本球厅限制参加活动的最多人数为每台4人（包含）；</view>
						<view>出于安全原因劝阻不适合的人员参加该活动；</view>
						<view>在活动中请各自保管好自己的私人物品。</view>
						<view>本活动属于自愿性、自助型活动，当由于意外事故，突发气候变化、突发疾病等不可预测因素造成身体损害，或者因个人的粗心大意造成私人物品丢失，与本球厅无关，请自行承担相应风险与责任。</view>
						<view>该免责声明目的是为提高自律能力和抗风险能力，免除一些不必要的后果，让您在小爱24H自助台球厅的活动更加安全、舒适。</view>
					</view>
					<view class="model-bottom">
						<!-- <view class="notip flexWrapNo" @tap="changeCheck()">
							<view class="cheack" :class="{cheackd:check}"></view>
							<text>不再提示</text>
						</view> -->
						<view class="btns flexWrap">
							<view @tap="disAgree()">不同意</view>
							<view class="okey-btn" @tap="agree()">同意</view>
						</view>
					</view>
				</view>
				<view class="mask-box" v-if="modelFlag"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				couponId:0,
				couponMoney:0,
				couponTitle:"",
				orderData:{
					store_equipment_id:"",
					order_type:"",
					order_price:"",
					yingfu_price:"",
					type:1,
					coupon_id:0,
					store_name:"",
					num_hour:"",
					service_start_time:"",
					service_end_time:"",
				},
				wallet:0,
				money:0,
				notEnough:false,
				paymentConfig:{},
				check:false,
				modelFlag:false,
				agreeFlag:false,
				payIndex:1,
				orderTime:"",
				discount_price:"",
				discount:"",
				yingfu_price:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad(ops) {
			this.orderData=JSON.parse(ops.orderData)
			this.getUserInfo();
			// this.getorderDiscount();
			this.agreeFlag=uni.getStorageSync('agreeFlag')||false
			this.paymentConfig=uni.getStorageSync('paymentConfig')
			this.orderTime = Date.parse(new Date())/1000;
			if(!this.agreeFlag){
				this.showModel()
			}else{
				this.closeModel()
			}
		},
		computed:{
			// 计算购物车商品价格
			totalPrice(){
				let that=this
				let totalPrice=0;
				totalPrice+=Number(that.orderData.order_price-that.couponMoney)
				if(totalPrice<0){
					totalPrice=0
				}
				return totalPrice.toFixed(2);
			}
		},
		methods: {
			getorderDiscount(){
				this.$request.get(this.$api.orderDiscount, {
					store_id:uni.getStorageSync('store_id'),
					order_price:this.orderData.order_price,
					service_start_time:this.orderData.startTime
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.discount=Number(data.discount/10)
						this.discount_price=data.discount_price
						this.yingfu_price=data.yingfu_price
					}
				})
			},
			changePayType(index){
				this.payIndex=index
			},
			changeCheck(){
				this.check=!this.check
				uni.setStorageSync('check',this.check)
			},
			closeModel(){
				this.modelFlag=false
			},
			showModel(){
				this.modelFlag=true
			},
			disAgree(){
				this.agreeFlag=false
				uni.setStorageSync('agreeFlag',this.agreeFlag)
				this.closeModel();
			},
			agree(){
				this.agreeFlag=true
				uni.setStorageSync('agreeFlag',this.agreeFlag)
				this.closeModel();
			},
			getCouponlist(){
				if(this.paymentConfig.coupon==0){
					return;
				}
				this.$request.post(this.$api.orderCoupon, {
					store_id:uni.getStorageSync('store_id'),
					order_price:this.orderData.order_price
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data.length!=0){
							this.couponId =data[0].id
							this.couponMoney = data[0].price
							this.couponTitle=data[0].title
						}
					}
				})
			},
			// 确认支付
			comfirmPay(){
				let timestamp = Date.parse(new Date())/1000;
				if(Math.abs(timestamp-this.orderTime)>300){
					uni.showModal({
						title: '提示',
						content: "当前页面停留过久，请新选择时间",
						success: function(res) {
							if(res.confirm){
								let pages = getCurrentPages(); //当前页
								let beforePage = pages[pages.length - 2]; //上个页面
								beforePage.$vm.tableDetails();
								uni.navigateBack({
									delta:1
								})
							}
						}
					});
					return;
				}
				if(!this.agreeFlag){
					this.$tools.showToast('请先阅读并同意免责声明')
					return;
				}
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.orderData.type=2
				this.orderData.pay_type=this.payIndex
				this.orderData.coupon_id=this.payIndex==1?this.couponId:0
				this.orderData.yingfu_price=this.payIndex==1?this.totalPrice:this.orderData.order_price
				if(this.payIndex==6){
					this.orderData.yingfu_price=this.yingfu_price
				}
				this.submitOrder();
			},
			// 条件订单验证
			submitOrder(){
				let orderData=JSON.parse(JSON.stringify(this.orderData))
				orderData.tr?orderData.num_hour=orderData.tr:orderData.num_hour=""
				orderData.store_id=uni.getStorageSync('store_id')
				orderData.discount_price=this.discount_price||0
				this.$request.post(this.$api.submitOrder,orderData, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					// 微信支付
					if(this.orderData.pay_type==1){
						if(this.totalPrice!=0){
							this.appletPay(data);
						}else{
							if(res.code==1){
								this.$tools.showToast("支付成功");
								uni.showLoading({
									title:"正在为你跳转,请稍等",
									mask:true
								})
								setTimeout(() => {
									uni.redirectTo({
										url:'/pages/home/orderSuccess?order_id='+data.order_id
									})
								},2000)
							}else{
								this.$tools.showToast(res.msg);
							}
						}
						return;
					}
					// 余额支付
					if (res.code==1&&this.orderData.type==2) {
						uni.redirectTo({
							url:'/pages/home/orderSuccess?order_id='+data.order_id
						})
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 获取余额
			getUserInfo(){
				this.$request.post(this.$api.userInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.wallet=data.wallet
						this.money=data.money
						if(this.couponMoney==0){
							this.getCouponlist();
						}
						if(this.wallet>this.orderData.order_price){
							this.payIndex=2
						}else{
							this.payIndex=1
						}
					}
				})
			},
			// 小程序支付
			appletPay(data) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: 'MD5',
					paySign: data.paySign,
					success(res) {
						that.$tools.showToast("支付成功");
						uni.showLoading({
							title:"正在为你跳转,请稍等",
							mask:true
						})
						setTimeout(() => {
							uni.redirectTo({
								url:'/pages/home/orderSuccess?order_id='+data.order_id
							})
						},2000)
					},
					fail(err) {
						console.log(err);
						that.$tools.showToast('支付取消')
					},
					complete(result) {
						
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 120upx;
	}
	.pay-box{
		.pay-item{
			height: 160rpx;
			background:#FFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			margin-top: 26rpx;
			border: 2rpx solid transparent;
			.item-top{
				height: 80rpx;
				background: #FFB726;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				padding: 0 20rpx 0 28rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333;
				.title{
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333;
					.title-icon{
						width: 56rpx;
						height: 56rpx;
						margin-right: 16rpx;
					}
				}
				.grey{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color:#000;
					margin-left: 10upx;
				}
				.check-box{
					width: 44rpx;
					height: 44rpx;
					margin-left: 24rpx;
				}
			}
			.item-bottom{
				height: 80rpx;
				padding: 0 20rpx 0 28rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #6E6E6E;
				.yellow{
					color: #FFB726;
					margin-left: 20rpx;
				}
				.charge-btn{
					width: 128rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #50AB6E;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #50AB6E;
				}
				.arrow-icon{
					width: 36upx;
					height: 36upx;
				}
			}
		}
		.active{
			border: 2rpx solid #E69C2F;
			.item-bottom{
				color: #333;
			}
		}
	}
	.disclaimer{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color:#BABABA;
		.cheack{
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
			border: 1rpx solid #BABABA;
			border-radius: 50%;
		}
		.cheackd{
			width: 36rpx;
			height: 36rpx;
			background: url('../../static/home/select-icon.png') no-repeat center/100% 100%;
			border: none;
		}
		text{
			color: #FFB726;
		}
	}
	.content{
		padding: 38upx;
	}
	.order-top{
		.shop-name{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
		}
		.order-time{
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 66upx;
			color: #E69C2F;
			margin-top: 24upx;
		}
	}
	.order-info-box{
		margin-top: 42upx;
		border-bottom: 1rpx solid #E3E3E3;
		.order-info{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
			border-top: 1rpx solid #E3E3E3;
			padding: 38upx 0;
			.coupon-price{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #E69C2F;
			}
		}
	}
	.total-money{
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 44upx;
		color: #FFFFFF;
		margin-top: 42upx;
		.money{
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 66upx;
			color: #26BCFD;
		}
	}
	.balance-box{
		margin-top: 34upx;
		.balance{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40upx;
			color: #FFB726;
		}
		.charge-btn{
			font-size: 20upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFB726;
			width: 90upx;
			height: 44upx;
			line-height: 44upx;
			text-align: center;
			border: 2upx solid #FFB726;
			border-radius: 16upx;
			margin-left: 24upx;
		}
	}
	.point-box{
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40upx;
		color: #6E6E6E;
		margin-top: 42upx;
	}
	.verification-box{
		width: 320rpx;
		height: 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #333333;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		justify-content: center;
		margin: auto;
		margin-top:10upx;
		.yanquan-icon{
			width: 144rpx;
			height: 44rpx;
			margin-right:16upx;
		}
		.icon-more{
			border-color:#969696;
		}
	}
	.btn-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		min-height: 120upx;
		padding: 12upx 48upx;
		justify-content: center;
		.wechat-pay{
			width: 308upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #FFB726;
			background-color: #FFB726;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			margin:20upx auto;
		}
	}
	.model-box{
		width: 710rpx;
		height: 1232rpx;
		background:#FFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.title{
			font-size: 48rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333334;
			text-align: center;
			padding-top: 48rpx;
		}
		.model-cont{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color:#6E6E6E;
			line-height: 50rpx;
			padding: 0 42rpx;
			margin-top: 40rpx;
		}
		.model-bottom{
			padding: 0 42rpx;
			position: absolute;
			bottom: 38rpx;
			left: 0;
			right: 0;
			margin: auto;
			.notip{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #6E6E6E;
				margin-right: 42rpx;
				flex: none;
				.cheack{
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
					border: 1rpx solid #6E6E6E;
					border-radius: 50%;
				}
				.cheackd{
					width: 36rpx;
					height: 36rpx;
					background: url('../../static/home/select-icon.png') no-repeat center/100% 100%;
					border: none;
				}
			}
			.btns{
				view{
					width: 204rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					border: 2rpx solid #D6D6D6;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333;
				}
				.okey-btn{
					width: 202rpx;
					background: #FFB726;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333;
					margin-left: 26rpx;
				}
			}
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
</style>
